<template>
  <view class="goodsItem u-flex">
    <!-- 选择框 -->
    <u-checkbox
      active-color="red"
      shape="circle"
      :value="item.isChecked"
      @input="toggleCheck(item.goods_id)"
    ></u-checkbox>
    <!-- 图片 -->
    <navigator
      :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
    >
      <u-image :src="item.pic" width="190" height="190" />
    </navigator>

    <view class="info u-flex">
      <!-- 商品标题 -->
      <navigator
        :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
        class="top u-line-2"
        >{{ item.goods_name }}</navigator
      >
      <view class="bottom u-flex">
        <!-- 商品价格 -->
        <view class="price">￥ {{ item.goods_price }}</view>
        <!-- 数量控制 -->
        <view class="number u-flex">
          <u-icon name="minus-circle" size="50" @click="minusHandler"></u-icon>
          <view class="num">{{ item.number }}</view>
          <u-icon
            name="plus-circle"
            size="50"
            @click="
              setGoodsNumber({
                goods_id: item.goods_id,
                number: item.number + 1,
              })
            "
          ></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  methods: {
    ...mapMutations('cart', ['setGoodsNumber', 'removeGoods', 'toggleCheck']),
    async minusHandler() {
      if (this.item.number > 1) {
        this.setGoodsNumber({
          goods_id: this.item.goods_id,
          number: this.item.number - 1,
        });
      } else {
        const [err, data] = await uni.showModal({
          content: '是否确认删除？',
        });
        if (!err && data.confirm) {
          this.removeGoods(this.item.goods_id);
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.goodsItem {
  margin: 20rpx 5rpx;
}
.info {
  flex: 1;
  margin-left: 20rpx;
  flex-direction: column;
  height: 190rpx;
  padding: 26rpx 0;
  justify-content: space-between;
  .top {
    width: 100%;
    font-size: 24rpx;
  }
  .bottom {
    width: 100%;
    justify-content: space-between;
    .price {
      color: red;
      font-size: 35rpx;
      font-weight: bold;
    }
    .number {
      font-size: 35rpx;
      .num {
        margin: 0 10rpx;
      }
    }
  }
}
</style>
